<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script src="../vue2.js"></script>
    <style>
        ul, li {
            list-style: none;
        }
    </style>
</head>
<body>
<div id="box">
    <h2>所有订单</h2>
    <ul>
        <li v-for="item in datalist" :key="item.id">
            {{item.title}}-
            <span v-if="item.state===0">已支付</span>
            <span v-else-if="item.state===1">待发货</span>
            <span v-else-if="item.state===2">已发货</span>
            <span v-else="item.state===3">已完成</span>
        </li>
    </ul>

    <!--template 就是一个包装元素，不会真正的创建在页面上，既可以实现包装其他元素，又不会破坏原生DOM结构-->
    <template v-if="isShow">
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
    </template>

</div>
</body>
<script>
    let vm = new Vue({
        el: "#box",
        data: {
            isShow: true,
            datalist: [
                {
                    id: 0,
                    title: '11111',
                    state: 0
                },
                {
                    id: 1,
                    title: '22222',
                    state: 1
                },
                {
                    id: 2,
                    title: '33333',
                    state: 2
                },
                {
                    id: 3,
                    title: '44444',
                    state: 3
                }
            ]
        },
        methods:{

        }
    })
</script>
</html>